<!-- Created by henian.xu on 2018/8/30. -->

<template>
    <div :class="classes">
        <textarea
            v-if="isTextarea"
            ref="textarea"
            :style="textareaStyle"
            v-model="model"
        />
        <input
            v-else
            ref="input"
            type="text"
            v-model="model"
        >
        <i 
            class="f-icon tc-g5"
            v-if="clear && value"
            @click="onClear"
        >&#xf01a;</i>
    </div>
</template>

<script>
import calcTextareaHeight from './calcTextareaHeight';
export default {
    name: 'XInput',
    data() {
        return {
            isMounted: false,
        };
    },
    props: {
        value: {
            type: [String, Number],
            default: '',
        },
        type: {
            validator(value) {
                return (
                    value === 'text' ||
                    value === 'textarea' ||
                    value === 'password' ||
                    value === 'url' ||
                    value === 'email' ||
                    value === 'date'
                );
            },
            default: 'text',
        },
        clear: {
            type: Boolean,
            default: false,
        },
        minRows: {
            type: Number,
            default: 1,
        },
        maxRows: {
            type: Number,
            default: null,
        },
    },
    computed: {
        model: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
        isTextarea() {
            return this.type === 'textarea';
        },
        classes() {
            return [this.isTextarea ? 'textarea' : 'input'];
        },
        textareaStyle() {
            const { $refs, minRows, maxRows, value, isMounted } = this;
            const { textarea } = $refs;
            // console.log(textarea, this._isMounted);
            if (!textarea || !isMounted) return {};
            const style = calcTextareaHeight(textarea, minRows, maxRows, value);
            return style;
        },
    },
    methods: {
        onClear() {
            this.model = '';
        },
    },
    mounted() {
        this.isMounted = true;
    },
};
</script>

<style lang="scss">
.input,
.textarea {
    flex: 1 1 1%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    border: 1px solid $color-border;
    padding: 0 $padding-small;
    > input,
    > textarea {
        flex: 1 1 1%;
        appearance: none;
        outline: none;
        line-height: 60px;
    }
    > .f-icon {
        line-height: 60px;
    }
}
.textarea {
    /*&:before {
        content: '1';
        display: block;
        line-height: 60px;
    }*/
    > textarea {
        resize: none;
        line-height: 1.5;
        padding: (60 - $body-font-size * 1.5)/2;
    }
}

.success {
    .input,
    .textarea {
        border-color: $color-success;
    }
}
.error {
    .input,
    .textarea {
        border-color: $color-danger;
    }
}
</style>
